<!-- 企业能效指标配置 -->

<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">企业能效指标配置</span>
      </div>
      <div class="w-full" style="height: calc(100% - 50px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          :model="formInline"
          class="m-20px pl-30px border-0 border-b border-solid border-#E0E0E0"
        >
          <el-form-item label="企业名称">
            <el-select v-model="qy" placeholder="请选择企业">
              <el-option
                v-for="item in qyOption"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="指标名称">
            <el-select v-model="zbmc" placeholder="请选择指标名称">
              <el-option
                v-for="item in zbmcOption"
                :key="item.id"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>

          <div class="mt-2px float-right">
            <el-button type="primary" class="w-80px rounded-15px" :icon="Search" @click="loadTableData" >查询</el-button>
            <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetSearch" >重置</el-button>
          </div>
        </el-form>
        <div class="text-right pr-20px pb-10px">
          <el-button type="primary" class="w-80px rounded-15px" :icon="Plus" @click="add" >新增</el-button>
        </div>
        <!--表格 -->
        <Table
          class="mt-20px"
          style="height: calc(100% - 200px)"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="query(row)">查看</el-button>
              <el-button link type="primary" @click="deleteData">编辑</el-button>
              <el-button link type="danger" @click="deleteData">删除</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogShow" title="企业能效指标配置详情查看" width="1000px" @close="dialogShow = false">
    <el-form
      v-for="(formItem, formIndex) in qynxzbFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
      :model="editForm"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item :label="item.label">
            <el-input v-model="editForm[item.prop]" :type="item.type" :disabled="inputDisabled"
              v-if="item.prop!='qymc'&&item.prop!='zbmc'" ></el-input>
            <el-input v-model="editForm.qyMc" :type="item.type" :disabled="inputDisabled"
              v-if="item.prop=='qymc'" ></el-input>
              <el-input v-model="editForm.zbmczd" :type="item.type" :disabled="inputDisabled"
                v-if="item.prop=='zbmc'" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <hr />
    </el-form>
  </Dialog>

  <!-- 新增 -->
  <Dialog :visible="dialogAddShow" title="企业能效指标配置新增" width="1000px" @close="close">
    <el-form
      v-for="(formItem, formIndex) in qynxzbFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
      :model="addForm"
      :rules="rules"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item :label="item.label" :prop="item.prop" v-if="item.prop!='qymc'&&item.prop!='zbmc'&&item.prop!='jszq'&&item.prop!='gxsj'">
            <el-input v-model="addForm[item.prop]" :name="item.prop" :type="item.type"></el-input>
          </el-form-item>
          <el-form-item label="企业名称" v-if="item.prop=='qymc'" prop="qymc">
            <el-select v-model="addForm.qyid" placeholder="请选择企业">
              <el-option v-for="item in qylbIdList" :key="item.id" :label="item.qymc" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="指标名称" v-if="item.prop=='zbmc'" prop="zbmc">
            <el-select v-model="addForm[item.prop]" placeholder="请选择指标名称">
              <el-option v-for="item in zbmcOption" :key="item.id" :label="item.mc" :value="item.dm" />
            </el-select>
          </el-form-item>
          <el-form-item label="指标周期" v-if="item.prop=='jszq'" prop="jszq">
            <el-date-picker v-model="addForm[item.prop]" :name="item.prop"  
            format="YYYY-MM" value-format="YYYY-MM" placeholder="选择时间" />

          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="text-right">
      <el-button class="w-80px h-40px" @click="close">取消</el-button>
      <el-button type="primary" class="w-80px h-40px" @click="addSave">保存</el-button>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'

const formInline = reactive({
  user: '',
  region: '',
})

//搜索参数
const pageNo = ref(1)
const pageSize = ref(10)
let tableTotal = ref(0)
const qy = ref('')
const zbmc = ref('')
const lxsj = ref(['', ''])

const resetSearch = () => {
  qy.value = ''
  zbmc.value = ''
  lxsj.value = ['', '']

  loadTableData()
}

//字典查询
const qyOption: any = ref([]) //企业
function getDictionary() {
  queryQymcInfoList().then((res: any) => {
    qyOption.value = res
  })
}
getDictionary()

//字典查询//企业 (带企业Id)
const qylbIdList: any = ref([]) 
function getQyxxInfo() {
  queryQyxxInfoList().then((res: any) => {
    qylbIdList.value = res
  })
}
getQyxxInfo()

//指标名称
const zbmcOption: any = ref([])
function getZbmcDictionary() {
  queryZdInfo({ zdxdm: 'zbmc' }).then((res: any) => {
    zbmcOption.value = res
  })
}
getZbmcDictionary()

// 定义列配置
const tableColumns = [
  {
    type: 'index',
    label: '序号',
    width: '80',
  },
  {
    prop: 'qyMc',
    label: '企业名称',
    width: 200,
  },
  {
    prop: 'zbmczd',
    label: '指名称',
  },
  {
    prop: 'zbz',
    label: '指标值',
    width: 240,
  },
  {
    prop: 'zbdw',
    label: '指标单位',
    width: 160,
  },
  {
    prop: 'jszq',
    label: '指标周期',
    width: 200,
  },
  {
    prop: 'gxsj',
    label: '更新时间',
  },
  {
    prop: 'gxr',
    label: '更新人',
  },
  {
    label: '操作',
    width: '140',
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]
const tableData = ref([])

//加载table数据
function loadTableData() {
  const params = {
    qymc: qy.value,
    zbmc: zbmc.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  }

  queryNxzbpzQyManagerList(params).then((res: any) => {
    tableData.value = res.records
    pageNo.value = res.current
    pageSize.value = res.size
    tableTotal.value = res.total
  })
}
loadTableData()


//分页按钮
const handleSizeChange = (val: number) =>{
  console.log(`每页 ${val} 条`);
  pageSize.value = val
  loadTableData()
}
const handleCurrentChange = (val: number) =>{
  console.log(`当前页: ${val}`);
  pageNo.value = val
  loadTableData()
}


//详情查看
const dialogShow = ref(false)
const inputDisabled = ref(true)
const qynxzbFormList = [
  {
    formLabelText: '基本信息',
    formLabelWidth: '160px',
    formList: [
      {
        prop: 'qymc',
        label: '企业名称',
        type: 'input',
        value: '',
      },
      {
        prop: 'zbmc',
        label: '指标名称',
        type: 'input',
        value: '',
      },
      {
        prop: 'zbz',
        label: '指标值',
        type: 'input',
        value: '',
      },
      {
        prop: 'zbdw',
        label: '指标单位',
        type: 'input',
        value: '',
      },
      {
        prop: 'jszq',
        label: '指标周期',
        type: 'input',
        value: '',
      },
      {
        prop: 'gxr',
        label: '更新人',
        type: 'input',
        value: '',
      },
      {
        prop: 'gxsj',
        label: '更新时间',
        type: 'input',
        value: '',
      },
    ],
  }
]

//保存校验
const rules = reactive<FormRules>({
  qymc: [
    { required: true, message: "指标名称不能为空", trigger: "blur" }
  ],
  zbmc: [
    { required: true, message: "指标名称不能为空", trigger: "blur" }
  ],
  zbz: [
    { required: true, message: "指标值不能为空", trigger: "blur" }
  ],
  zbdw: [
    { required: true, message: "指标单位不能为空", trigger: "blur" }
  ],
  zbzq: [
    { required: true, message: "指标周期不能为空", trigger: "blur" }
  ],
})

//查询详情
const editForm: any = ref({})
const query = (row: any) => {
  editForm.value = row
  inputDisabled.value = true
  dialogShow.value = true
}

const deleteData = () => {
  ElMessageBox.confirm('暂无权限操作!', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {})
}

const close = () => {
  //弹出框清空
  qynxzbFormList[0].formList.forEach((e: any)=>{
    e.value = ''
  })
  addForm.value = {}
  dialogAddShow.value = false
}

const dialogAddShow = ref(false)
const addForm = ref({})
const add = () => {
  //弹出框清空
  qynxzbFormList[0].formList.forEach((e: any)=>{
    e.value = ''
  })
  addForm.value = {}
  dialogAddShow.value = true
}
const addSave = () => {
  let data: any = addForm.value
  //校验
  if(data.qyid==undefined||data.qyid===""){
    ElMessage({message: "新增失败！企业名称不能为空" ,type: 'warning'})
    return
  }
  if(data.zbmc==undefined||data.zbmc===""){
    ElMessage({message: "新增失败！指标名称不能为空" ,type: 'warning'})
    return
  }
  if(data.zbz==undefined||data.zbz===""){
    ElMessage({message: "新增失败！指标值不能为空" ,type: 'warning'})
    return
  }
  if(data.zbdw==undefined||data.zbdw===""){
    ElMessage({message: "新增失败！指标单位不能为空" ,type: 'warning'})
    return
  }
  if(data.jszq==undefined||data.jszq===""){
    ElMessage({message: "新增失败！指标周期不能为空" ,type: 'warning'})
    return
  }
  data.zbz = Number(data.zbz)
  nxzbpzQyInsertOrUpdate(data).then((res: any) => {
    if(res!=null){
      dialogAddShow.value = false
      loadTableData()
      ElMessage({message: '新增成功！',type: 'success'});
    }
  }).catch((error)=>{
    ElMessage({message: "新增失败! " + error?.response?.data?.result?.resultMessage ,type: 'error'})
  })
}

</script>

<style>
hr {
  margin-bottom: 18px;
  border: 0;
  border-bottom: 1px solid #ededed;
}
</style>
